<template>
  <div>
    <h1>computed函数用法</h1>
    <ul>
      <li>基本工资：{{ monkey }}</li>
      <li>加薪后：{{ addMonkey }}</li>
      <li>
        <button @click="add">加薪</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</template>

<script>
/**
 * 作用：根据现有响应式数据(变量)经过一定的计算得到全新的数据
 * **使用步骤**
1. 从vue框架中导入`computed` 函数
2. 在setup函数中执行computed函数，并传入一个函数，在函数中定义计算公式
3. 把computed函数调用完的执行结果放到setup的return值对象中
 */
import { computed, ref } from 'vue'
export default {
  setup () {
    // 1e4 科学计数法 === 10000
    // 工资
    const monkey = ref(1e4)

    // 计算加薪
    const addMonkey = computed(() => {
      /**
       * 1. 默认执行一次
       * 2. 计算函数内变量变了，会再次重新计算（核心）
       */
      // monkey发生变化就会执行加薪操作
      console.log('加薪幅度：', Math.random(1e4))
      return monkey.value + 10000
    })

    // 点击加薪
    const add = () => {
      monkey.value = Math.random() * 2e4 + 1e4
    }

    return { monkey, addMonkey, add }
  }
}
</script>

<style lang="scss" scoped>
</style>
